<template>
  <div class="container">
    <div class="container-top flex-box-align">
      <div class="top-name">商品列表</div>
    </div>
    <div class="input_modal">
      <div class="modal-list">
        <div class="input-item">
          <span class="name">商品名称：</span>
          <el-input
            v-model="params.titleLike"
            placeholder="请输入"
            class="proName"
          />
        </div>
        <div class="input-item">
          <span class="name">一级分类：</span>
          <el-input
            v-model="params.categoryName"
            placeholder="请输入"
            class="proName"
          />
        </div>
        <div class="input-item">
          <span class="name">二级分类：</span>
          <el-input
            v-model="params.categoryTowName"
            placeholder="请输入"
            class="proName"
          />
        </div>
        <div class="input-item">
          <span class="name">三级分类：</span>
          <el-input
            v-model="params.categoryThreeName"
            placeholder="请输入"
            class="proName"
          />
        </div>
        <div class="input-item">
          <span class="name">所属商户：</span>
          <el-input
            v-model="params.storeName"
            placeholder="请输入"
            class="proName"
          />
        </div>
        <div class="input-item">
          <span class="name">品牌：</span>
          <el-input
            v-model="params.brandName"
            placeholder="请输入"
            class="proName"
          />
        </div>
        <div class="input-item">
          <span class="name">状态：</span>
          <el-select
            v-model='params.status'
            placeholder='请选择'
            style="height: 30px;  line-height: 30px;width:170px;"
          >
            <el-option label="立即上架" value="SALE"/>
            <el-option label="放入仓库" value="NOTSALE"/>
          </el-select>
        </div>
        <div class="input-item">
          <span class="name">商品类型：</span>
          <el-select
            v-model='params.productType'
            placeholder='请选择'
            style="height: 30px; line-height: 30px;width:170px;"
          >
            <el-option label="积分商品" value="POINT"/>
            <el-option label="普通商品" value="GENERAL"/>
          </el-select>
        </div>
      </div>
    </div>
    <div class="btns-modal">
      <div class="btns-top">
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-plus"
          @click="linkTo"
        >新增</el-button>
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-sort-up"
          @click="upBtn('SALE')"
        >批量上架</el-button>
        <el-button
          size="mini"
          icon="el-icon-sort-down"
          @click="upBtn('NOTSALE')"
        >批量下架</el-button>
      </div>
    </div>
    <div class="table_con">
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="25">
        </el-table-column>
        <el-table-column
          prop="productCode"
          :formatter="formatter"
          label="商品编码"
        ></el-table-column>
        <el-table-column
          prop="title"
          :formatter="formatter"
          label="商品名称"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="storeName"
          :formatter="formatter"
          label="所属商户"
        ></el-table-column>
        <el-table-column
          prop="brandName"
          :formatter="formatter"
          label="品牌"
        ></el-table-column>
        <el-table-column
          prop="categoryName"
          :formatter="formatter"
          label="一级类别"
        ></el-table-column>
        <el-table-column
          prop="categoryTowName"
          :formatter="formatter"
          label="二级分类"
        ></el-table-column>
        <el-table-column
          prop="categoryThreeName"
          :formatter="formatter"
          label="三级分类"
        ></el-table-column>
        <!--<el-table-column-->
        <!--prop="categoryParentName"-->
        <!--label="商品分类"-->
        <!--width="120"-->
        <!--&gt;-->
        <!--<template slot-scope="scope">-->
        <!--{{scope.row.firstCategoryParentName}} > {{scope.row.categoryParentName}} > {{scope.row.categoryName}}-->
        <!--</template>-->
        <!--</el-table-column>-->
        <!--<el-table-column prop="productType" label="商品类型">-->
        <!--<template slot-scope="scope">-->
        <!--{{returnType(scope.row.productType)}}-->
        <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column
          prop="totalStock"
          :formatter="formatter"
          label="库存"
        ></el-table-column>
        <el-table-column
          prop="price"
          :formatter="formatter"
          label="价格"
        ></el-table-column>
        <el-table-column
          prop="supplier"
          :formatter="formatter"
          label="折扣价"
        ></el-table-column>
        <el-table-column
          prop="productType"
          :formatter="formatter"
          label="积分商品"
        >
          <template slot-scope="scope">
            <div>{{scope.row.productType === 'POINT' ? '积分商品' : '普通商品'}}</div>

          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          :formatter="formatter"
          label="状态"
        >
          <template slot-scope="scope">
            <div>{{scope.row.status === 'SALE' ? '上架' : '放入仓库'}}</div>

          </template>
        </el-table-column>
        <el-table-column
          prop="plateCode"
          label="商品图片"
          width='100'
        >
          <template slot-scope="scope">
            <img
              @click="codeShow(scope.row.appExampleImageUrl)"
              style="width:60px;height:40px;cursor:pointer"
              :src="scope.row.appExampleImageUrl"
              alt=""
            >
          </template>
        </el-table-column>
        <el-table-column
          prop=""
          label="操作"
          width='220'
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              v-if="scope.row.status == 'SALE'"
              @click="$router.push('/goodCheck?id='+scope.row.id+'&type='+scope.row.categoryName +'>'+ scope.row.categoryTowName  +'>'+ scope.row.categoryThreeName)"
            >查看商品</el-button>
            <el-button
              type="primary"
              size="mini"
              class="el-icon-edit"
              v-if="scope.row.status != 'SALE'"
              @click="$router.push('/good/goodEdit?id='+scope.row.id+'&pageIndex='+pageIndex)"
            >编辑</el-button>
            <el-button
              type="primary"
              size="mini"
              @click="linkToTop(scope.row.id,scope.row.status)"
            >{{scope.row.status !='SALE' ?'立即上架':'放入仓库'}}</el-button>
            <el-button
              type="danger"
              size="mini"
              class="el-icon-delete"
              @click="linkToDel(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      title="查看图片"
      :visible.sync="codeState"
      width="40%">
      <img style="width:100%" :src="codeImg" alt="">
      <span slot="footer" class="dialog-footer">
            <el-button type="cancel" @click="codeState = false">关闭</el-button>
        </span>
    </el-dialog>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageIndex"
        :page-size="pageSize"
        :page-sizes='[10,20,30,40]'
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageCount"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        tableData: [],
        modelList: [],
        codeState:false,
        codeImg:'',
        bannerArr: [
          {
            name: "全部",
            id: ""
          },
          {
            name: "启用",
            id: "y"
          },
          {
            name: "禁用",
            id: "n"
          }
        ],
        dateArr: [],
        sortArr: [],
        sortArr1: [],
        sortArr2:[],
        pageCount: null,
        pageIndex: 1,
        pageSize: 10,
        loading: true,
        categoryParentId: null,
        categoryId: null,
        productCodeLike: "",
        titleLike: "",
        ids:[],
        saleStatus:'',
        secondcategoryId:'',
        statusList: [{
          id: '',
          name: '全部'
        },{
          id: 'SALE',
          name: '在售'
        },{
          id: 'NOTSALE',
          name: '仓库中'
        }],
        params: {
          "brandName": "",
          "categoryName": "",
          "categoryThreeName": "",
          "categoryTowName": "",
          "productCodeLike": "",
          "productType": "",
          "searchWord": "",
          "status": "",
          "storeId": "",
          "storeName": "",
          "titleLike": ""
        },
      };
    },
    mounted() {
      this.pageIndex = this.$route.query.pageIndex
        ? this.$route.query.pageIndex
        : 1;
      this.getList();
    },
    methods: {
      codeShow(pic){
        this.codeState = true
        this.codeImg = pic
      },
      returnType(status){
        switch(status){
          case 'GOLD':
            return '红包商品';
            break;
          case 'SILVER':
            return '银豆商品';
            break;
          case 'RMB_ORDINARY':
            return '实物商品';
            break;
          case 'RMB':
            return '激活商品';
            break;
        }
      },
      getStatus(status){
        switch(status){
          case 'SALE':
            return '在售';
            break;
          case 'NOTSALE':
            return '仓库中';
            break;
        }
      },
      editModelCode:function(item){
        item.active = !item.active;
      },
      handleClose(done) {
        done();
        this.getList();
      },
      handleSelectionChange(row){
        this.ids= []
        row.map(item=>{
          this.ids.push(item.id)
        })
      },
      linkToTop(id, state) {
        this.$confirm(
          `确定${state == "SALE" ? "放入仓库" : "立即上架"}?`,
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        )
          .then(async () => {
            const url = this.$api.goodShelves,
              data = {
                ids: [id],
                saleStatus: state == "SALE"?'NOTSALE':'SALE'
              };
            const json = await this.$https.fetchPost(url, data)
            if (json.data.code == 200) {
              this.$message({
                type: "success",
                message: "操作成功!"
              });
              this.getList();
            } else {
              this.$message({
                type: "warning",
                message: json.data.data.errMsg
              });
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消操作"
            });
          });
      },
      linkToDel(id) {
        this.$confirm(`确定删除?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(async () => {
            const url = this.$api.goodDel;
            const json = await this.$https.fetchDel(url+id)
            if (json.data.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getList();
            } else {
              this.$message({
                type: "warning",
                message: json.data.data.errMsg
              });
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      },
      formatter(row, column, cellValue) {
        return cellValue ? cellValue : "- -";
      },
      refresh(){
        this.pageIndex = 1
        this.dateArr = []
        this.titleLike = ''
        this.categoryParentId = ''
        this.categoryId = ''
        this.secondcategoryId = ''
        this.saleStatus = ''
        this.sortArr1 = [];
        this.sortArr2 = [];
        this.getList()
      },
      getList: async function() {
        this.loading = true;
        const json = await this.$https.fetchPost(this.$api.goodList, {
          ...this.params,
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
        })
        this.loading = false;
        if (json.data.code === 200) {
          this.tableData = json.data.data.bussData;
          this.pageCount = json.data.data.count;
        } else{
          this.$message({
            type: "warning",
            message: json.data.data.errMsg
          })
        }
      },
      search: function(e) {
        if (e.keyCode == 13) {
          this.pageIndex = 1;
          this.getList();
        }
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.pageIndex = val;
        this.getList();
      },
      linkTo() {
        this.$router.push("goodEdit");
      }
    },
    filters: {
      formatStatus(value) {
        var list = [];
        list["y"] = "上架";
        list["n"] = "下架";
        if (value) {
          return list[value];
        } else {
          return "--";
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  .table_con{
    .el-table{
      .el-table__row{
        a{
          cursor:pointer;
          color:#409EFF;
        }
      }
    }
  }
  .table-cate {
    font-size: 14px;
    color: #606266;
    width: 90%;
    margin-left: 8%;
    margin-bottom: 30px;
    .table-head {
      overflow: hidden;
      display: flex;
      background-color: #d1d1d1;
      color: #333;
      .head-list {
        flex: 1;
        float: left;
        text-align: center;
        height: 40px;
        line-height: 40px;
      }
    }
    .no-data{
      border: 1px solid #e1e1e1;
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
    .table-item {
      overflow: hidden;
      display: flex;
      background-color: #fff;
      color: #333;
      border: 1px solid #e1e1e1;
      .table-list {
        flex: 1;
        float: left;
        text-align: center;
        height: 50px;
        line-height: 50px;
        border-right: 1px solid #e1e1e1;
        .el-button{
          background: 0 0 !important;
          border:none;
        }
        .el-input {
          float: left;
          width: 90% !important;
          margin-left: 5%;
          input {
            width: 100% !important;
          }
        }
        &:last-child {
          border-right: 0;
        }
      }
    }
  }
</style>
